<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-muted-200 dark:bg-muted-600 text-muted-800 dark:text-muted-300"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-primary-100 dark:bg-primary-500 text-primary-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-lime-100 text-lime-500 dark:bg-lime-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-green-100 text-green-500 dark:bg-green-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-emerald-100 text-emerald-500 dark:bg-emerald-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-teal-100 text-teal-500 dark:bg-teal-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-cyan-100 text-cyan-500 dark:bg-cyan-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-sky-100 text-sky-500 dark:bg-sky-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-blue-100 text-blue-500 dark:bg-blue-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-indigo-100 text-indigo-500 dark:bg-indigo-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-violet-100 text-violet-500 dark:bg-violet-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-purple-100 text-purple-500 dark:bg-purple-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-fuchsia-100 text-fuchsia-500 dark:bg-fuchsia-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-pink-100 text-pink-500 dark:bg-pink-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-rose-100 text-rose-500 dark:bg-rose-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-red-100 text-red-500 dark:bg-red-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-orange-100 text-orange-500 dark:bg-orange-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-amber-100 text-amber-500 dark:bg-amber-500 dark:text-white"
    />

    <BaseAvatar
      text="CT"
      size="md"
      shape="curved"
      class="bg-yellow-100 text-yellow-500 dark:bg-yellow-500 dark:text-white"
    />
  </div>
</template>
